<template>
    <div>
      <h2>库存统计</h2>
      <div class="chart" id="myEcharts">
          图表的容器
      </div>
  </div>
</template>

<script setup>
  import {inject,reactive,onMounted} from 'vue'
  let $echarts = inject('echarts');
  let $http = inject('axios');

  let data =reactive({})

  async function getState(){
    data = await $http({url:'/three/data'})
  }
  onMounted(()=>{
  getState().then(()=>{
    let myChart = $echarts.init(document.getElementById('myEcharts'))
    myChart.setOption({
      legend:{//设置图例
        top:"bottom"//放到最下面
      },
      tooltip:{
        show:true,

      },
      series:[
        {
          type:"pie",//饼图
          data:data.data.chartThree.chartData,
          radius:[10,100],//饼图的半径数组的第一项是内半径，第二项是外半径
          center:["50%","45%"],//饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
          roseType:"area",//设置成玫瑰图
          itemStyle:{
            borderRadius:10//用于指定饼图扇形区块的内外圆角半径，
          }
        }
      ]
    })
  })
})

</script>

<style>
h2 {
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  font-size: 0.25rem;
  text-align: center;
}
.chart{
  height: 4.5rem;
}
</style>